<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>
</head>
<body>
    <div id="app">
        {{name}}
        {{sayHello()}}
        {{add()}}
        <p v-if="flag">
            测试v-if标签使用
        </p>
        <p v-else-if="rich">
            测试v-else-if标签使用
        </p>
        <p v-else="rich">
            测试v-else标签使用
        </p>
        <p v-show="rich">
            有钱！
        </p>
        <p v-if="rich">
            有钱！
        </p>
        <button type="button" @click="rich=!rich">今晚彩票开奖</button>

        <ul>
            <li v-for="(a,i) in array" :key="i">{{i}}====={{a}}</li>
        </ul>

        <ul>
            <li v-for="(v,k,i) in student">索引：{{i}},{{k}}====={{v}}</li>
        </ul>

        <input type="text" v-model="title">
        {{title}}

        <a :href="link">跳转到百度</a>
        跳转的地址更改为：<input type="text" v-model="link">

        累加<input type="button" @click="sum(1)" value="累加" >
        累加结果：{{total}}
    </div>
    <script type="text/javascript">
        new Vue({
            el:"#app",
            data:{
                id:1,
                title:"张三老师",
                link:"http://www.baidu.com",
                name:"张三",
                age:18,
                flag:true,
                rich:false,
                array:[1,2,3,4,5,6],
                student:{
                    id:1,
                    username:"夜访",
                    age:16,
                    sex:"男"
                },
                total:0
            },
            methods:{
                sayHello:function () {
                    return "Hello Vue";
                },
                add:function () {
                    return 2+3;
                },
                sum:function (s) {
                    return this.total = this.total+s;
                }
            }
        });
    </script>
</body>
</html>